<template>
	<div class="explore">
		<el-row :gutter="20">
			<el-col :span="3">
				<div style="border: 1px solid rgb(218, 218, 218);">
					<!-- <draggable v-model="data" :options="{ sort: false, group: { name: 'field', pull: 'clone', put: false } }" draggable=".custom-tree-node"> -->
						<!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
						<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :render-content="renderContent" node-key="id" :default-expanded-keys="[0]"></el-tree>
						<!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
							<span slot-scope="{ node, data }">
								<span>{{ node.label }}</span>
							</span>
						</el-tree> -->
						<!-- <draggable v-model="leftData" :options="{ sort: false, group: { name: 'field', pull: 'clone', put: false } }" draggable=".custom-tree-node">
							<div v-for="(node, index) in leftData" :key="index" class="custom-tree-node">
								{{ node.name }}
							</div>
						</draggable> -->
					<!-- </draggable> -->
				</div>
			</el-col>
			<el-col :span="3">
				<div style="border: 1px solid rgb(218, 218, 218);">
					<index-draggable ref="indexDraggable"></index-draggable>
				</div>
			</el-col>
			<el-col :span="18">
				<div style="border: 1px solid rgb(218, 218, 218);">
					<el-table :data="tableData" border style="width: 100%" stripe>
						<el-table-column
							prop="date"
							label="指标编号">
						</el-table-column>
						<el-table-column
							prop="name"
							label="指标名称">
						</el-table-column>
						<el-table-column
							prop="address"
							label="上季指标">
						</el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
		<filter-dialog ref="filterDialog" title="新建过滤" :node="node"></filter-dialog>
	</div>
</template>

<script>
import IndexDraggable from '@/components/IndexDraggable'
import draggable from 'vuedraggable'
import FilterDialog from '@/components/FilterDialog'
export default {
	name: 'Explore',
	components: {
		IndexDraggable,
		draggable,
		FilterDialog
	},
	data () {
		return {
			leftData: [
				{
          id: 2,
          name: '2'
        },
        {
          id: 3,
          name: '3'
        }
			],
			data: [{
				id: 0,
				label: '编号字段',
				children: [{
					label: '指标编号',
					isLeaf: true,
					radio: '3'
				}]
			}, {
				id: 1,
				label: '派生度量',
				children: [{
					label: '上季指标',
					isLeaf: true
				}, {
					label: '上年指标',
					isLeaf: true
				}]
			}, {
				id: 2,
				label: '日期维度',
				children: [{
					label: '数据日期',
					isLeaf: true
				}, {
					label: '统计日期',
					isLeaf: true
				}]
			}, {
				id: 3,
				label: '时间维度',
				children: [{
					label: 'INDEX_NO',
					isLeaf: true
				}, {
					label: '数据日期',
					isLeaf: true
				}]
			}],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			tableData: [{
				date: 'T_AP_OI_AVC_D_0_10001',
				name: '样例数据',
				address: '78000'
			}, {
				date: 'T_AP_OI_AVC_D_0_10001',
				name: '样例数据',
				address: '78000'
			}, {
				date: 'T_AP_OI_AVC_D_0_10001',
				name: '样例数据',
				address: '78000'
			}, {
				date: 'T_AP_OI_AVC_D_0_10001',
				name: '样例数据',
				address: '78000'
			}],
			node: {}
		}
	},
	methods: {
		handleNodeClick(data) {
			// console.log(data)
		},
		renderContent(h, { node, data, store }) {
			// return (
			// 	<span class="custom-tree-node" draggable={node.isLeaf} >
			// 		<span>{node.label}</span>
			// 	</span>
			// )
			return h (
				'div',
				{
					attrs: {
						draggable: node.level === 2
					},
					on: {
						// dragstart: e => {
						// 	e.dataTransfer.setData('text/plain', 'event.target.id')
						// },
						drag: e => {
							if (this.isDragZone(e.pageX, e.pageY)) {
								this.$refs.indexDraggable.$refs.dragZone.style.borderColor = 'rgb(31, 117, 254)'
							} else {
								this.$refs.indexDraggable.$refs.dragZone.style.borderColor = 'rgb(218, 218, 218)'
							}
							if (this.calcPagePosition(e.pageX, e.pageY, 'measurementZone')) {
								this.$refs.indexDraggable.$refs.measurementZone.style.borderColor = 'rgb(115, 203, 128)'
							} else {
								this.$refs.indexDraggable.$refs.measurementZone.style.borderColor = 'rgb(218, 218, 218)'
							}
							if (this.$refs.indexDraggable.$refs.dimensionZone) {
								this.isDragZoneRef(e.pageX, e.pageY, 'dimensionZone', 'drag')
							}
							if (this.calcPagePosition(e.pageX, e.pageY, 'filterZone')) {
								this.$refs.indexDraggable.$refs.filterZone.style.borderColor = 'rgb(31, 117, 254)'
								this.$refs.indexDraggable.$refs.filterZone.style.backgroundColor = 'rgb(245, 249, 255)'
							} else {
								this.$refs.indexDraggable.$refs.filterZone.style.borderColor = 'rgb(218, 218, 218)'
								this.$refs.indexDraggable.$refs.filterZone.style.backgroundColor = 'rgb(251, 251, 251)'
							}
						},
						dragend: e => {
							// console.log(e)
							if (this.isDragZone(e.pageX, e.pageY)) {
								this.$refs.indexDraggable.myArray.push({
									id: this.$refs.indexDraggable.myArray.length,
									name: node.label
								})
							}
							if (this.calcPagePosition(e.pageX, e.pageY, 'measurementZone')) {
								this.$refs.indexDraggable.temArray.push([{
									id: this.$refs.indexDraggable.temArray.length,
									name: node.label
								}])
							}
							if (this.$refs.indexDraggable.$refs.dimensionZone) {
								this.isDragZoneRef(e.pageX, e.pageY, 'dimensionZone', 'dragend', node)
							}
							if (this.calcPagePosition(e.pageX, e.pageY, 'filterZone')) {
								this.node = node
								this.$refs.filterDialog.dialogVisible = true
							}
						},
						// dragenter: e => {
						// 	console.log('dragenter')
						// },
						// dragover: e => {
						// 	console.log('dragover')
						// },
						// dragleave: e => {
						// 	console.log('dragleave')
						// },
						// drop: e => {
						// 	console.log('drop')
						// }
					}
				},
				node.label
			)
		},
		calcPagePosition (pageX, pageY, node) {
			// console.log(this.$refs.indexDraggable.$el.getBoundingClientRect().left + (window.pageXOffset || document.documentElement.scrollLeft))
			// console.log(this.$refs.indexDraggable.$el.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop))
			// console.log(pageX)
			// console.log(pageY)
			return pageX >= (this.$refs.indexDraggable.$refs[node].getBoundingClientRect().left + (window.pageXOffset || document.documentElement.scrollLeft)) && pageX <= (this.$refs.indexDraggable.$refs[node].getBoundingClientRect().left + (window.pageXOffset || document.documentElement.scrollLeft) + this.$refs.indexDraggable.$refs[node].getBoundingClientRect().width) && pageY >= (this.$refs.indexDraggable.$refs[node].getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop)) && pageY <= (this.$refs.indexDraggable.$refs[node].getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop) + this.$refs.indexDraggable.$refs[node].getBoundingClientRect().height)
		},
		isDragZone (pageX, pageY) {
			return pageX >= (this.$refs.indexDraggable.$refs.dragZone.getBoundingClientRect().left + (window.pageXOffset || document.documentElement.scrollLeft)) && pageX <= (this.$refs.indexDraggable.$refs.dragZone.getBoundingClientRect().left + (window.pageXOffset || document.documentElement.scrollLeft) + this.$refs.indexDraggable.$refs.dragZone.getBoundingClientRect().width) && pageY >= (this.$refs.indexDraggable.$refs.dragZone.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop)) && pageY <= (this.$refs.indexDraggable.$refs.dragZone.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop) + this.$refs.indexDraggable.$refs.dragZone.getBoundingClientRect().height)
		},
		// 如果有多个ref，需要判断具体哪个ref在鼠标坐标范围内
		isDragZoneRef (pageX, pageY, node, type, nodeData) {
			for (let i = 0; i < this.$refs.indexDraggable.$refs[node].length; i++) {
				if (pageX >= (this.$refs.indexDraggable.$refs[node][i].getBoundingClientRect().left + (window.pageXOffset || document.documentElement.scrollLeft)) && pageX <= (this.$refs.indexDraggable.$refs[node][i].getBoundingClientRect().left + (window.pageXOffset || document.documentElement.scrollLeft) + this.$refs.indexDraggable.$refs[node][i].getBoundingClientRect().width) && pageY >= (this.$refs.indexDraggable.$refs[node][i].getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop)) && pageY <= (this.$refs.indexDraggable.$refs[node][i].getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop) + this.$refs.indexDraggable.$refs[node][i].getBoundingClientRect().height)) {
					if (type === 'drag') {
						this.$refs.indexDraggable.$refs[node][i].style.borderColor = 'rgb(31, 117, 254)'
					} else if (type === 'dragend') {
						this.$refs.indexDraggable.temArray[i].push({
							// id: this.$refs.indexDraggable.temArray[i].length,
							name: nodeData.label
						})
					}
				} else {
					if (type === 'drag') {
						this.$refs.indexDraggable.$refs[node][i].style.borderColor = 'rgb(218, 218, 218)'
					}
				}
			}
		}
	}
}
</script>

<style lang="less" scoped>

</style>
